<template>
  <div class='container'>
    <!-- 添加或编辑目录对话框 -->
    <el-dialog :title="showTitle"  :visible="showDialog" width="30%" @close='btnCancel'>
      <el-form style="margin-left:40px;" :model="addForm" :rules="rule" label-width="80px" ref="addForm">
        <el-form-item  label="所属学科" prop="subjectName">
          <el-select placeholder="请选择" v-model="addForm.subjectName" style="width:80%">
            <el-option v-for="item in list" :label="item.label" :value="item.value" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName">
          <el-input placeholder="请输入目录名称" v-model="addForm.directoryName" style="width:80%"></el-input>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <el-row type="flex" justify="center">
           <el-col :span="8">
             <el-button size="small" @click="btnCancel">取消</el-button>
             <el-button type="primary" size="small" @click="btnOK">确定</el-button>
           </el-col>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects'
import { add, update } from '@/api/hmmm/directorys'
export default {
  props: {
    showDialog: {
      type: Boolean,
      required: true
    },
    formData: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      list: {},
      userId: '',
      addForm: {
        subjectName: '',
        directoryName: ''
      },
      rule: {
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' },
          { min: 3, max: 8, message: '长度在3-8个字符', trigger: 'blur' }
        ],
        subjectName: [
          { type: 'number', required: true, message: '请选择所属学科', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    showTitle () {
      return this.formData.id ? '修改学科' : '新增学科'
    }
  },
  methods: {
    // 点击编辑时，所属学科和目录都有内容，所以需要赋值
    async editList () {
      const { data: res } = await simple()
      this.list = res
      this.addForm.subjectName = this.formData.subjectID
      console.log(this.formData)
      this.addForm.directoryName = this.formData.directoryName
      this.userId = this.formData.id
    },
    // 点击新增时时，所属学科有选项但并未填写
    async addList () {
      const { data: result } = await simple()
      this.list = result
    },
    async btnOK () {
      try {
        await this.$refs.addForm.validate()
        if (this.formData.id) {
          await update({
            id: this.userId,
            subjectID: this.addForm.subjectName,
            directoryName: this.addForm.directoryName
          })
          this.$emit('update:showDialog', false)
          this.$parent.getList(this.$parent.page)
          this.$message.success('修改目录成功')
        } else {
          await add({
            id: this.userId,
            subjectID: this.addForm.subjectName,
            directoryName: this.addForm.directoryName
          })
          this.$emit('update:showDialog', false)
          this.$parent.getList(this.$parent.page)
          this.$message.success('新增目录成功')
        }
      } catch (err) {
        console.log(err)
      }
    },
    btnCancel () {
      this.addForm.subjectName = ''
      this.addForm.directoryName = ''
      this.$refs.addForm.resetFields()
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style scoped lang='less'></style>
